<template>
    <div class="home">
        <div class="header">
            <!-- 页面头部和查询区域 -->
            <div class="ParkingSpaceManagement-tittle">
                <div class="crumbs">
                    <p><span>设备管理 /</span> <span> 公共设备管理</span></p>
                    <h3>公共设备管理</h3>
                </div>
                <div class="search">
                    <div class="search-left">
                        <el-form-item label="设备分类">
                            <el-select clearable v-model="equipmentClassify" placeholder="设备分类">
                                <el-option label="电梯" value="电梯" />
                                <el-option label="健身器材" value="健身器材" />
                                <el-option label="路灯" value="路灯" />
                                <el-option label="垃圾桶" value="垃圾桶" />
                                <el-option label="灭火器" value="灭火器" />
                                <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" /> -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备名称/编号">
                            <el-input clearable v-model="equipmentName" placeholder="请输入" />
                        </el-form-item>
                    </div>
                    <div class="search-right">
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button type="primary" plain @click="reset">重置</el-button>
                    </div>
                </div>
            </div>
            <!-- 新建按钮 -->
            <div class="body">
                <div class="equipment">
                    <span>设备列表</span>
                    <div class="title-btn">
                        <el-button type="primary" @click="go">+ 新建</el-button>
                        <el-button type="primary" plain @click="batchDel">批量操作</el-button>
                    </div>
                </div>
                <!-- 表格 -->
                <el-table :data="tableData" stripe style="width: 100%" :cell-style="cellStyle"
                    :header-row-style="headerStyle" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column prop="equipmentClassify" label="设备分类" align="center" />
                    <el-table-column prop="equipmentName" label="设备名称" align="center" />
                    <el-table-column prop="equipmentNumber" label="设备编号" align="center" />
                    <!-- <template #default="scope">
                        <span>{{ scope.row.area }}㎡</span>
                    </template> -->
                    <!-- </el-table-column> -->
                    <el-table-column prop="brandModel" label="品牌型号" align="center" />
                    <el-table-column prop="area" label="所在区域" align="center" />
                    <!-- <template #default="scope">
                        <span>{{ scope.row.carType == 0 ? '产权车位' : '公共停车位' }}</span>
                    </template>
                </el-table-column> -->
                    <el-table-column prop="equipmentStatus" label="设备状态" align="center" />
                    <el-table-column prop="maintainer" label="维护人员" align="center" />
                    <el-table-column label="操作" align="center" width="200">
                        <template #default="scope">
                            <!-- <el-button type="primary" text @click="handleEdit()">详情</el-button> -->
                            <el-button type="primary" text @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="primary" text @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="demo-pagination-block">
                    <Page :total="total" :count="count" :currentPage="page" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></Page>
                </div>
                <!-- 编辑 -->
                <el-dialog v-model="dialogVisible" title="编辑设备" width="40%">
                    <el-form require-asterisk-position="right">
                        <el-form-item label="设备分类" required="true">
                            <el-select clearable v-model="editData.equipmentClassify" placeholder="设备分类"
                                style="width:350px">
                                <el-option label="电梯" value="电梯" />
                                <el-option label="健身器材" value="健身器材" />
                                <el-option label="路灯" value="路灯" />
                                <el-option label="垃圾桶" value="垃圾桶" />
                                <el-option label="灭火器" value="灭火器" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="设备名称" required="true">
                            <el-input style="width:350px" clearable v-model="editData.equipmentName"
                                placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="设备编号">
                            <el-input style="width:350px" clearable v-model="editData.equipmentNumber"
                                placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="设备型号">
                            <el-input style="width:350px" clearable v-model="editData.brandModel" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="位置区域">
                            <el-input style="width:350px" clearable v-model="editData.area" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="维护人员">
                            <el-input style="width:350px" clearable v-model="editData.maintainer" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="设备状态">
                            <!-- <el-input type="number" min="0" clearable v-model="addData.carNum" placeholder="请输入" /> -->
                            <el-radio-group v-model="editData.equipmentStatus" style="width:350px">
                                <el-radio label="正常">正常</el-radio>
                                <el-radio label="异常">异常</el-radio>
                                <!-- <el-radio :label="9">Option C</el-radio> -->
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注" style="margin-left: 30px">
                            <el-input style="width:350px" :rows="4" type="textarea" clearable v-model="editData.note"
                                placeholder="请输入" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="edit">
                                提交
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";
import Page from "../../../components/Page.vue";
import http from "../../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../../router/index";

const cellStyle = ref({
    height: "60px",
    fontSize: "15px",
});
const headerStyle = ref({
    height: "60px",
    fontSize: "15px",
    color: "black",
});
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  // console.log(val)
  multipleSelection.value = [];
  val.forEach((v) => {
    multipleSelection.value.push(v.id);
  });
};
// let batchDel = ref([])
let tableData = ref([]);
let communityId = ref('');
let equipmentClassify = ref('');
let equipmentName = ref('')
let total = ref(0);
let page = ref(1);
let count = ref(5);
let editData = ref({
    // id: 0,
    equipmentClassify: '',
    equipmentName: '',
    equipmentNumber: '',
    brandModel: '',
    area: '',
    maintainer: '',
    equipmentStatus: '',
    note: ''
});
//删除
let handleDelete = (index) => {
    http({
        url: '/equipmentManagement/delete',
        method: "DELETE",
        data:[index]
    }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
            getData();
        }
    })
};
//编辑
let dialogVisible = ref(false);
let handleEdit = (row) => {
    //显示弹窗
    dialogVisible.value = true;
    //赋值
    editData.value = { ...row }
};
let edit = () => {
    http({
        url: '/equipmentManagement/update',
        method: 'POST',
        data: editData.value
    }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
            ElMessage({
                message: "编辑成功",
                type: "success",
            });
            dialogVisible.value = false;
            getData();
        } else {
            ElMessage.error("编辑失败");
        }
    })
}
//分页
let handleCurrentChange = (val) => {
    console.log(val)
    page.value = val;
    getData();
};
let handleSizeChange = (val) => {
    console.log(val)
    count.value = val;
    getData();
};


// 渲染函数
let getData = () => {
    http({
        url: "/equipmentManagement/list",
        params: {
            page: page.value,
            limit: count.value,
            communityId: communityId.value,
            equipmentClassify: equipmentClassify.value,
            equipmentName: equipmentName.value
        },
    }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
            tableData.value = data.data.list;
            total.value = data.data.totalCount;
        }
    });
};

//搜索
let search = () => {
    getData();
};
//重置
let reset = () => {
    communityId.value = '',
        equipmentClassify.value = '',
        equipmentName.value = ''
    getData();
};
//新建
let go = () => {
    router.push('/home/NewDevice')
}
//批量删除
let batchDel = ()=>{
    http({
        url:'/equipmentManagement/delete',
        method:'DELETE',
        data:multipleSelection.value,
    }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getData();
    } else {
      ElMessage.error("删除失败");
    }
  });
}


onMounted(() => {
    console.log("挂载后");
    getData();
});
</script>


<style lang="less" scoped>
.header {
    width: 90%;
    // height: 100%;
    margin: auto;

    .ParkingSpaceManagement-tittle {
        margin-top: 20px;
        background-color: white;

        .crumbs {
            padding: 15px 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;

            p {
                margin-bottom: 10px;

                span:nth-child(1) {
                    color: #8d8d8d;
                }

                span:last-child {
                    color: #000;
                }
            }
        }

        .search {
            width: 93%;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .search-left {
                display: flex;

                div:nth-child(1) {
                    margin-right: 50px;
                }

                .el-input {
                    margin-left: 15px;
                    width: 250px;
                }
            }
        }
    }

    .body {
        padding: 15px 20px;
        margin-top: 20px;
        background-color: white;

        .equipment {
            width: 96%;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .el-table {
            .el-button {
                margin: 0;
            }
        }
    }

    .el-pagination {
        margin-top: 20px;
        // padding-right: 10px;
        justify-content: flex-end;
    }
}
</style>